<template>
  <div>
    <h1>palyground</h1>
    <div class="pages">
      <div class="box box-one"></div>
      <div class="box box-two"></div>
      <div class="box box-three"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
onMounted(() => {
  console.log(route)
})
</script>

<style scoped lang="scss">
.pages {
  // css变量也是有作用域的，次为局部作用域， 如果需要在全局配    则用:root{}
  // 见名之意
  --my-size: 50px;
  --my-primary-color: #ffc0cb;
}
.box {
  background-color: var(--my-primary-color);
  margin-bottom: 10px;
}

.box-one {
  width: var(--my-size);
  height: var(--my-size);
}
.box-two {
  width: calc(2 * var(--my-size));
  height: calc(2 * var(--my-size));
}
.box-three {
  width: calc(3 * var(--my-size));
  height: calc(3 * var(--my-size));
}
</style>
